<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
        /* Step 1 让我们将以下样式添加到rect元素。 */
         svg rect {
            fill: gray;
         }
         /* Step 2 - Add styles in text element - 添加以下CSS类以将样式应用于文本值。 将此样式添加到SVG文本元素。 它定义如下 - */
         svg text {
            fill: yellow;
            font: 12px sans-serif;
            text-anchor: end;
         }
      </style>
   </head>
   <body>
      <script>
         // Step 3 - Define variables - 让我们在脚本中添加变量。 这将在下面解释。
        // Width - SVG的宽度。
        // Scalefactor - 缩放到屏幕上可见的像素值。
        // Barheight - 这是水平条的静态高度。
         var data = [10, 5, 12, 15];
         var width = 300 
            scaleFactor = 20, 
            barHeight = 30;
         // Step 4 - Append SVG elements - 让我们使用以下代码在D3中添加SVG元素。
         var graph = d3.select("body")
            .append("svg")
            .attr("width", width)
            // 我们将条形高度设为30，数据数组长度为4.然后SVG高度计算为barheight * datalength，即120 px。
            .attr("height", barHeight * data.length);
         // Step 5 - Apply transformation - 让我们使用以下代码在bar中应用转换。
         var bar = graph.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function(d, i) {
               return "translate(0," + i * barHeight + ")";
            });
         // Step 6 - Append rect elements to the bar - 在上一步中，我们附加了组元素。 现在使用以下代码将rect元素添加到栏中。
         // 宽度是（数据值*比例因子），高度是（条形高度 - 边距）。
         bar.append("rect").attr("width", function(d) {
            return d * scaleFactor;
         })
         .attr("height", barHeight - 1);
         // Step 7 - Display data - 这是最后一步。 让我们使用以下代码在每个条上显示数据。
         bar.append("text")
            .attr("x", function(d) { return (d*scaleFactor); })
            .attr("y", barHeight/2)
            .attr("dy", ".35em")
            .text(function(d) { return d; });
      </script>
   </body>
</html>